<template>
  <a-table :pagination='false' rowKey="id" :columns="columns" :dataSource="list" style="margin:15px 0">
    <template #action="action,row">
      <a-button style="margin-right:5px" type="primary" @click="$emit('add',row)">添加</a-button>
      <a-button style="margin-right:5px" type="primary" ghost @click="toEdit(row)">修改</a-button>
      <a-button style="margin-right:5px" type="danger" @click="toRemove(row)">删除</a-button>
    </template>
    <a-table :pagination="false" :showHeader='false' slot='expandedRowRender' slot-scope="row" rowKey="id" :columns="columns" :dataSource="row.child" style="margin:10px 0">
      <template #action="action,row">
        <a-button style="margin-right:5px" type="primary" @click="toEdit(row)">修改</a-button>
        <a-button style="margin-right:5px" type="danger" @click="toRemove(row)">删除</a-button>
      </template>
    </a-table>
  </a-table>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns: [
        { title: '能力节点', dataIndex: 'name' },
        { title: '能力名称', dataIndex: 'title' },
        { title: '能力描述', dataIndex: 'desc' },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 350 },
      ],
    };
  },
  methods: {
    toEdit(row) {
      this.$emit('change', row)
    },
    toRemove(row) {
      this.$emit('remove', row)
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
